<template>
	<div>
		<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
			<el-form-item>
				<h1></h1>
			</el-form-item>
			<el-form-item label="患者就诊卡ID:" prop="idnumber" required="">
				<el-input v-model="ruleForm.idnumber" style="width:400px ;" placeholder="请输入患者就诊卡ID"></el-input>
				<el-button type="primary" @click="getregister">显示</el-button>
			</el-form-item>
			<el-form-item label="患者姓名:" prop="name">
				<el-input v-model="ruleForm.name" style="width:400px ;" placeholder="请输入患者姓名"></el-input>
			</el-form-item>
			<el-form-item label="性别" prop="sex">
				<el-select v-model="ruleForm.sex" placeholder="请选择性别" style="width:200px ;">
					<el-option label="男" value="男"></el-option>
					<el-option label="女" value="女"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="年龄:" prop="age">
				<el-input v-model="ruleForm.age" style="width:200px ;" placeholder="请输入年龄"></el-input>
			</el-form-item>
			<el-form-item label="就诊日期:" required>
				<el-col class="diagnosis" :span="11">
					<el-form-item prop="day">
						<!-- <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker> -->
						<el-date-picker v-model="ruleForm.day" value-format="yyyy年M月dd日" align="right" type="date"
							placeholder="选择日期" style="width: 100%;" :picker-options="pickerOptions">
						</el-date-picker>
					</el-form-item>
				</el-col>
			</el-form-item>
			<el-form-item label="诊断信息:" prop="result">
				<el-input type="textarea" v-model="ruleForm.result" style="width:600px ;"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submitForm('ruleForm')">保存并提交</el-button>
				<el-button @click="resetForm('ruleForm')">重置</el-button>
				<el-button type="info"  @click="dialogTableVisible=true;getdiagnosis()">打印诊断信息</el-button>
				<el-dialog title="门诊确诊" :visible.sync="dialogTableVisible">
					<el-table :data="gridData">
						<el-table-column prop="num" label="确诊单号" width="120">
						</el-table-column>
						<el-table-column prop="idnumber" label="患者就诊卡ID" width="120">
						</el-table-column>
						<el-table-column prop="name" label="患者姓名" width="120">
						</el-table-column>
						<el-table-column prop="age" label="年龄" width="120">
						</el-table-column>
						<el-table-column prop="sex" label="性别" width="120">
						</el-table-column>
						<el-table-column prop="day" label="就诊日期" width="150">
						</el-table-column>
						<el-table-column prop="result" label="诊断信息">
						</el-table-column>
					</el-table>
				</el-dialog>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	import {
		showMsgTitle
	} from '@/utils/api'
	import {
		showMsgConfirm
	} from '@/utils/api'
	import {
		getRequest
	} from '@/utils/api'
	import {
		postRequest
	} from '@/utils/api'
	import {
		uploadFileRequest
	} from '@/utils/api'
	import {
		putRequest
	} from '@/utils/api'
	import {
		deleteRequest
	} from '@/utils/api'
	import {
		showConstants
	} from '@/utils/api'
	export default {
		data() {
			return {
				gridData: [],
				dialogTableVisible: false,
				formLabelWidth: '400px',
				ruleForm: {
					id: '',
					name: '',
					sex: '',
					age: '',
					day: '',
					result: '',
				},
				rules: {
					id: [{
							required: true,
							message: '请输入患者就诊卡ID',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 10,
							message: '长度为10个数字字符',
							trigger: 'blur'
						}
					],
					name: [{
							required: true,
							message: '请输入患者姓名',
							trigger: 'blur'
						},
						{
							min: 2,
							max: 10,
							message: '长度在2  到 10 个字符',
							trigger: 'blur'
						}
					],
					sex: [{
						required: true,
						message: '请选择性别',
						trigger: 'change'
					}],
					age: [{
						required: true,
						message: '请输入年龄',
						trigger: 'change'
					}],
					day: [{
						type: 'date',
						required: true,
						message: '请选择出生日期',
						trigger: 'change'
					}],
					result: [{
						required: true,
						message: '请填写诊断结果',
						trigger: 'blur'
					}],
					aa: [{
						required: true,
						message: '请填写处理意见',
						trigger: 'blur'
					}]
				}
			};
		},
		methods: {
			getregister()
			{
				this.$axios.get('http://localhost:8081/idregister?idnumber=' + this.ruleForm.idnumber).then((result) => {
					console.log(result.data);
					this.ruleForm = result.data[0];
				}).catch((err) => {
					console.log(error);
				});
			},
			submitForm(formName) {
				postRequest('/addconfirm', this.ruleForm).then(resp => {
					alert("开具诊断成功！");
				}).catch((err) => {
					alert("开具诊断失败，请重新开具！");
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			getdiagnosis() {
				this.$axios.get('http://localhost:8081/idconfirm?idnumber=' + this.ruleForm.idnumber).then((result) => {
					console.log(result.data);
					this.gridData = result.data
				}).catch((err) => {
					console.log(error);
				});
			}
		},
		mounted() {
			this.getdiagnosis();
		}
	}
</script>

<style>
	.diagnosis.el-col {
		background-color: #FFFFFF;
	}
</style>
